<template>
  <div class="container user-list" v-loading="loading">
    <el-upload
      class="upload-demo"
      drag
      :http-request="afterRead"
      multiple
    >
      <el-icon class="el-icon--upload"><upload-filled /></el-icon>
      <div class="el-upload__text">
        将文件拖放到此处或 <em>单击上传</em>
      </div>
      <template #tip>
        <div class="el-upload__tip">
          只能上传execl表格数据，大小限制10M以下。
          <el-link type="success" href="/media/uploads/daoru.xlsx">下载表格模版</el-link>
        </div>
      </template>
    </el-upload>
    
    <el-row v-if="flag">
      <el-table
        :data="users.items" 
        border 
        class="table" 
        :row-key="row => row.id" 
        table-layout="auto"
        :row-class-name="tableRowClassName"
      >

        <!-- <el-table-column type="selection" width="38"/> -->
        <el-table-column label="账号">
          <template #default="scope">
            <span>{{ scope.row.username }}</span>
            <!-- <el-image v-if="scope.row.vip" :src="vipImg" style="height: 20px;position: relative; top:5px; left: 5px"/> -->
          </template>
        </el-table-column>
        <el-table-column prop="nickname" label="昵称"/>
        <el-table-column prop="power" label="剩余算力"/>

        <el-table-column label="用户组">
          <template #default="scope">
            <span>{{ scope.row.usergroup }}</span>
          </template>
        </el-table-column>

        <el-table-column label="模型">
          <template #default="scope">
            <span>{{ scope.row.chat_models_json }}</span>
          </template>
        </el-table-column>

        <el-table-column label="过期时间">
          <template #default="scope">
            <span v-if="scope.row['expired_time']">{{ scope.row['expired_time'] }}</span>
            <el-tag v-else>长期有效</el-tag>
          </template>
        </el-table-column>

        <el-table-column label="状态" width="80">
          <template #default="scope">

            <el-tooltip placement="top-end" v-if="scope.row.iserror">
              <template #content> {{ scope.row.errormes }} </template>
              <el-button type="danger">失败</el-button>
            </el-tooltip>

            <!-- <el-tag v-if="scope.row.iserror" type="danger">失败</el-tag> -->
            <el-tag type="success" v-else>成功</el-tag>

          </template>
        </el-table-column>
      </el-table>

      <div class="pagination">
        <el-pagination v-if="users.total > 0"
                       background
                       layout="total, prev, pager, next"
                       v-model:current-page="users.page"
                       v-model:page-size="users.page_size"
                       :total="users.total"
                       @current-change="fetchUserList(users.page, users.page_size)"
        />

      </div>
    </el-row>
  </div>
</template>

<script setup>
import {ref} from "vue";
import { UploadFilled } from '@element-plus/icons-vue';
import {httpPost, httpGet} from "@/utils/http";
import {ElMessage} from "element-plus";
import {dateFormat} from "@/utils/libs";

const flag = ref(false)
const users = ref({page: 1, page_size: 10, items: []})
const query = ref({page: 1, page_size: 15})

const afterRead = (file) => {
  const formData = new FormData();
  formData.append('excel_file', file.file, file.name);
  const params = 
  // 执行上传操作
  httpPost(`/api/admin/user/importslist?page=${users.value.page}&page_size=${users.value.page_size}`, formData).then((res) => {
    if (res.data) {
      // 初始化数据
      flag.value = true
      const arr = res.data.items;
      for (let i = 0; i < arr.length; i++) {
        arr[i].expired_time = dateFormat(arr[i].expired_time)
      }
      users.value.items = arr
      users.value.total = res.data.total
      users.value.page = res.data.page

      console.log(users.value)
    }
    ElMessage.success({message: "上传成功", duration: 500})
  }).catch((e) => {
    ElMessage.error('导入用户数据失败:' + e.message)
  })
}

const tableRowClassName = ({row}) => {
  if (row.iserror) {
    return 'warning-row'
  }
}

const fetchUserList = function (page, pageSize) {
  query.value.page = page
  query.value.page_size = pageSize
  httpGet('/api/admin/user/importslist', query.value).then((res) => {
    if (res.data) {
      // 初始化数据
      const arr = res.data.items;
      for (let i = 0; i < arr.length; i++) {
        arr[i].expired_time = dateFormat(arr[i].expired_time)
      }
      users.value.items = arr
      users.value.total = res.data.total
      users.value.page = res.data.page
    }
  }).catch(() => {
    ElMessage.error('加载用户列表失败')
  })
}

</script>

<style>
.el-table .warning-row {
  --el-table-tr-bg-color: var(--el-color-warning-light-9);
}
</style>

